<template>
  <Layout class="index">
    <Header>
      <v-header></v-header>
    </Header>
    <Content>
      <div class="rowWrapperP">
        <Row style="padding:70px 0">
          <Col class="zjsm">
          <Card :bordered="false">
            <p
              class="title"
              slot="title"
            >走进世贸</p>
            <p
              class="fontClor"
              slot="title"
            >World Trade profile</p>
            <p>
              在公司出现以前，个人独资企业是最典型的企业形式；与独资企业并存的是各种，合伙组织当时的
              合伙组织中最典型的就是家族经营团体，在公司产生以前，合伙组织都没有取得法人的地位
              但是却有，其他的一些法人团体出现。这种情况最早可以追溯至古罗马时期。在古罗马，国家地方
              自治团体，寺院等宗教团体…
            </p>
            <p style="text-align:right">
              <Button
                type="primary"
                ghost
              >了解详情</Button>
            </p>
          </Card>
          </Col>
          <Col class="smdt">
          <Card :bordered="false">
            <p
              slot="title"
              style="text-align:center"
              class="title"
            >世贸动态</p>
            <p
              slot="title"
              style="text-align:center"
              class="fontClor"
            >World trade trends</p>
            <Row>
              <Col class="dtTitle">
              <Button
                :class="{active:show==1}"
                @click="activeShow(1)"
              >公司新闻</Button>
              <Button
                :class="{active:show==2}"
                @click="activeShow(2)"
              >公司公告</Button>
              <Button
                :class="{active:show==3}"
                @click="activeShow(3)"
              >活动预告</Button>
              </Col>
              <Col span="24">
              <Card
                :bordered="false"
                dis-hover
              >
                <div
                  v-if="show==1"
                  class="swiper-container swiper-container-news"
                >1
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <Row :gutter="8">
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_03.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_05.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_07.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                      </Row>
                    </div>
                  </div>
                  <div class="swiper-pagination"></div>
                </div>
                <div
                  v-if="show==2"
                  class="swiper-container swiper-container-news"
                >2
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <Row :gutter="8">
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_03.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_05.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_07.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                      </Row>
                    </div>
                    <div class="swiper-slide">
                      <Row :gutter="8">
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_03.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_05.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_07.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                      </Row>
                    </div>
                  </div>
                  <div class="swiper-pagination"></div>
                </div>
                <div
                  v-if="show==3"
                  class="swiper-container swiper-container-news"
                >3
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <Row :gutter="8">
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_03.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_05.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_07.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                      </Row>
                    </div>
                    <div class="swiper-slide">
                      <Row :gutter="8">
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_03.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_05.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                        <Col :lg="{span:8}">
                        <Card :bordered="false">
                          <div style="text-align:center">
                            <img
                              src="../assets/index/newsTitle_07.jpg"
                              alt=""
                              srcset=""
                            >
                            <p>地球上的水是哪里来的？有人说是木星…</p>
                            <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                          </div>
                        </Card>
                        </Col>
                      </Row>
                    </div>
                  </div>
                  <div class="swiper-pagination"></div>
                </div>
              </Card>
              </Col>
            </Row>
          </Card>
          </Col>
        </Row>
      </div>
      <Row class='m_server'>
        <Col span="24">
        <div class="fl">
          <p class="title">世贸服务</p>
          <h3 class="fontClor">World trade trends</h3>
        </div>
        <Card
          :bordered="false"
          :padding="0"
          class="fr"
          dis-hover
        >
          <ul>
            <li>
              <div class="m_img">
                <img
                  src="../assets/index/zxlist_03.jpg"
                  alt=""
                >
              </div>
              <div class="m_title">文化娱乐</div>
            </li>
            <li>
              <div class="m_img">
                <img
                  src="../assets/index/zxlist_05.jpg"
                  alt=""
                >
              </div>
              <div class="m_title">咨询中心</div>
            </li>
            <li>
              <div class="m_img">
                <img
                  src="../assets/index/zxlist_10.jpg"
                  alt=""
                >
              </div>
              <div class="m_title">服务中心</div>
            </li>
            <li>
              <div class="m_img">
                <img
                  src="../assets/index/zxlist_12.jpg"
                  alt=""
                >
              </div>
              <div class="m_title">会员中心</div>
            </li>
          </ul>
        </Card>
        </Col>
        <div class="clear"></div>
      </Row>
      <div class="rowWrapperP">
        <Row class="attractInvestment">
          <!-- 招商 -->
          <Col span="24">
          <Card :bordered="false">
            <p
              slot="title"
              class="title"
            >招商引资</p>
            <p
              slot="title"
              class="fontClor"
            >Attract investment</p>
            <div class="swiper-container swiper-investment">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <Row :gutter="16">
                    <Col
                      :lg="{span:6}"
                      class="investment"
                    >
                    <Card :bordered="false">
                      <div style="text-align:center">
                        <img
                          src="../assets/index/newsTitle_03.jpg"
                          alt=""
                          srcset=""
                        >
                        <p>地球上的水是哪里来的？有人说是木星…</p>
                        <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                        <p
                          class="fontClor"
                          style="text-align:right"
                        >了解详情</p>
                      </div>
                    </Card>
                    </Col>
                    <Col
                      :lg="{span:6}"
                      class="investment"
                    >
                    <Card :bordered="false">
                      <div style="text-align:center">
                        <img
                          src="../assets/index/newsTitle_03.jpg"
                          alt=""
                          srcset=""
                        >
                        <p>地球上的水是哪里来的？有人说是木星…</p>
                        <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                        <p
                          class="fontClor"
                          style="text-align:right"
                        >了解详情</p>
                      </div>
                    </Card>
                    </Col>
                    <Col
                      :lg="{span:6}"
                      class="investment"
                    >
                    <Card :bordered="false">
                      <div style="text-align:center">
                        <img
                          src="../assets/index/newsTitle_03.jpg"
                          alt=""
                          srcset=""
                        >
                        <p>地球上的水是哪里来的？有人说是木星…</p>
                        <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                        <p
                          class="fontClor"
                          style="text-align:right"
                        >了解详情</p>
                      </div>
                    </Card>
                    </Col>
                    <Col
                      :lg="{span:6}"
                      class="investment"
                    >
                    <Card :bordered="false">
                      <div style="text-align:center">
                        <img
                          src="../assets/index/newsTitle_03.jpg"
                          alt=""
                          srcset=""
                        >
                        <p>地球上的水是哪里来的？有人说是木星…</p>
                        <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                        <p
                          class="fontClor"
                          style="text-align:right"
                        >了解详情</p>
                      </div>
                    </Card>
                    </Col>
                  </Row>
                </div>
                <div class="swiper-slide">
                  <Row :gutter="16">
                    <Col
                      :lg="{span:6}"
                      class="investment"
                    >
                    <Card :bordered="false">
                      <div style="text-align:center">
                        <img
                          src="../assets/index/newsTitle_03.jpg"
                          alt=""
                          srcset=""
                        >
                        <p>地球上的水是哪里来的？有人说是木星…</p>
                        <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                        <p
                          class="fontClor"
                          style="text-align:right"
                        >了解详情</p>
                      </div>
                    </Card>
                    </Col>
                    <Col
                      :lg="{span:6}"
                      class="investment"
                    >
                    <Card :bordered="false">
                      <div style="text-align:center">
                        <img
                          src="../assets/index/newsTitle_03.jpg"
                          alt=""
                          srcset=""
                        >
                        <p>地球上的水是哪里来的？有人说是木星…</p>
                        <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                        <p
                          class="fontClor"
                          style="text-align:right"
                        >了解详情</p>
                      </div>
                    </Card>
                    </Col>
                    <Col
                      :lg="{span:6}"
                      class="investment"
                    >
                    <Card :bordered="false">
                      <div style="text-align:center">
                        <img
                          src="../assets/index/newsTitle_03.jpg"
                          alt=""
                          srcset=""
                        >
                        <p>地球上的水是哪里来的？有人说是木星…</p>
                        <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                        <p
                          class="fontClor"
                          style="text-align:right"
                        >了解详情</p>
                      </div>
                    </Card>
                    </Col>
                    <Col
                      :lg="{span:6}"
                      class="investment"
                    >
                    <Card :bordered="false">
                      <div style="text-align:center">
                        <img
                          src="../assets/index/newsTitle_03.jpg"
                          alt=""
                          srcset=""
                        >
                        <p>地球上的水是哪里来的？有人说是木星…</p>
                        <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                        <p
                          class="fontClor"
                          style="text-align:right"
                        >了解详情</p>
                      </div>
                    </Card>
                    </Col>
                  </Row>
                </div>
              </div>
              <div class="swiper-pagination"></div>
            </div>
          </Card>
          </Col>
        </Row>
      </div>
    </Content>
    <Footer>
      <v-footer></v-footer>
    </Footer>
  </Layout>
</template>

<script>
import vHeader from '../components/main_header.vue'
import vFooter from '../components/main_footer.vue'
export default {
  name: 'index',
  components: {
    vHeader,
    vFooter
  },
  data() {
    return {
      show: 1
    }
  },
  created() {
  
  },
  mounted() {
    let mySwiperNews = new Swiper(".swiper-container-news", {
      autoplay: true, //可选选项，自动滑动
      pagination: {
        el: ".swiper-pagination"
      }
    });
    let mySwiperinvestment = new Swiper(".swiper-investment", {
      autoplay: true, //可选选项，自动滑动
      pagination: {
        el: ".swiper-pagination"
      }
    });
  },
  methods: {
    activeShow(type) {
      this.show = type;
    }
  }
}
</script>
<style lang="less">
.index {
  .zjsm {
    height: 500px;
    background-color: #e5e5e5;
    background-image: url("../assets/index/jjBg.jpg");
    background-size: 50% 100%;
    background-repeat: no-repeat;

    .ivu-card {
      width: 55%;
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -110px;
      padding-left: 5%;
    }
  }
  .smdt {
    .dtTitle {
      margin: 0 auto;
      width: 400px;
      display: flex;
      justify-content: space-between;
      .ivu-btn {
        color: #333;
        background-color: #e5e5e5;
        border-color: #e5e5e5;
      }
      .active {
        color: #fff;
        background-color: #73a1ce;
        border-color: #73a1ce;
      }
    }
    .swiper-wrapper {
      padding-bottom: 50px;
      .ivu-card {
        img {
          width: 100%;
        }
        p {
          text-align: left;
        }
      }
    }
  }
  .m_server {
    background-color: #e5e5e5;
    background-image: url("../assets/index/newsTitle_05.jpg");
    background-size: 50% 100%;
    background-repeat: no-repeat;
    padding: 80px 13%;
    .ivu-card {
      background: none;
      width: 55%;
      ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-flow: wrap;
        li {
          width: 45%;
          position: relative;
          background: blue;
          margin: 10px;
          cursor: pointer;
          img {
            width: 100%;
          }
          .m_title {
            position: absolute;
            left: 0;
            top: 50%;
            text-align: center;
            width: 100%;
            height: 80px;
            color: #ffffff;
            font-size: 1.5em;
            background-image: linear-gradient(
              to left,
              rgba(0, 0, 0, 0.3) 15%,
              rgba(0, 0, 0, 0.9) 70%,
              rgba(0, 0, 0, 0.3) 100%
            );
            line-height: 80px;
            margin-top: -40px;
          }
          .m_img img {
            transition: all 1s;
            width: 100%;
            height: 100%;
            transform: scale(1);
          }
        }
        li:hover .m_img img {
          opacity: 0.8;
          transform: scale(1.02);
        }
        li:hover .m_title {
          background: none;
        }
      }
    }
  }
  .attractInvestment {
    padding: 80px 0;
    .swiper-wrapper {
      padding-bottom: 50px;
      .ivu-card {
        img {
          width: 100%;
        }
        p {
          text-align: left;
        }
      }
    }
    .swiper-investment {
      .investment {
        transform: scale(1);
      }
      .investment:hover {
        transform: scale(1.1);
      }
    }
  }
}
</style>
